<template>
    <div class="thematicMap_box">
        <div
            id="ViewerContainer"
            :class="{ mapThematicSize: mapSize }"
            tabindex="0"
            @click="fouseMap"
            @keyup.space="resetView"
        >
            <div class="header">
                <div class="title_name">高分共性产品与真实性检验共享服务平台</div>
                <div class="header-user" v-if="userName">
                    <div
                        @click="toDataManager"
                        v-if="userName === 'admin' && !isPhone"
                        class="user-quit"
                    >
                        后台管理
                    </div>
                    <div class="user-quit user-data" @click="ctrlOrderListDis">
                        数据订单
                        <span class="num_box">{{ orderNum }}</span>
                    </div>
                    <div class="user-wrap">
                        <div class="user-portrait"></div>
                        <div class="user-name">{{ userName }}</div>
                    </div>
                    <div @click="userLogout" class="user-quit">
                        退出
                    </div>
                    <div @click="download" class="user-wrap">
                        <div class="user-help"></div>
                    </div>
                </div>
                <div class="header-user" v-else>
                    <div class="user-wrap">
                        <div class="user-name" @click="openLoginPage('用户登录')">登录</div>
                    </div>
                    <div class="user-wrap">
                        <div class="user-name" @click="openLoginPage('用户注册')">注册</div>
                    </div>
                    <div @click="download" class="user-wrap">
                        <div class="user-help"></div>
                    </div>
                </div>
            </div>
            <dataQueryTools ref="dataQueryTools"></dataQueryTools>

            <listParam ref="listParamDom" v-show="showParam" class="listParam_class"></listParam>
            <listDis v-show="showList" class="listDis_class"></listDis>
            <orderList v-show="showOrderList" ref="orderListDom" class="listDis_class"></orderList>

            <layerCtrl
                v-if="isStart"
                v-show="disLayerCtrl"
                class="listDis_class map_Ctl"
            ></layerCtrl>
            <FunGroup v-if="funGroupShow" ref="funGroup"></FunGroup>

            <seqImg
                v-if="isShowSeqImg"
                :typeCode="seqImgCode"
                :serviceUrl="serviceUrl"
                @getTimes="getTimes"
            ></seqImg>
            <div class="lat_lng_dis_box">
                <div class="text_box">
                    <span>{{ latlngDis.lat }}</span>
                    <span>{{ latlngDis.lon }}</span>
                    <span>{{ latlngDis.height }}</span>
                    <span>{{ latlngDis.viewHeight }}</span>
                </div>
            </div>
        </div>
        <screenshotsStatic
            v-if="isStart"
            :class="{ visibilityScreen: isShowScreenshots }"
            ref="screenshotsStaticFun"
        ></screenshotsStatic>
        <div class="hide_ele" v-if="isStart">{{ isShowScreenshots }}</div>
        <div class="hide_class">{{ orderNumCode }}</div>
    </div>
</template>

<script>
/* global Cesium viewer */
/* global Y_BASE_URL */
import { mapState } from 'vuex';
import dataQueryTools from './dataQueryTools';
import listParam from './listDis/param';
import listDis from './listDis/listDis';
import orderList from './orderList';
import seqImg from './seqImages/seqImg';
import initViewer from 'U/initViewer';
import CommonJS from 'U/common';
import layerCtrl from './layerCtrl/layerCtrl';
import { flyToBoundingSphere, coordinateTra } from 'U/dataQueryFunc';
import FunGroup from './funGroup/funGroup';
import screenshotsStatic from './themeTicChild/screenshots/scienceshotsStatic-N';
import { logout } from '@/service/user';
import DrawFun from './funGroup/draw_fun';
import { postQuery } from 'S/order';
import { insertModular } from 'S/downloadNum';
export default {
    name: 'mapContent',
    components: {
        dataQueryTools,
        listParam,
        listDis,
        layerCtrl,
        seqImg,
        FunGroup,
        screenshotsStatic,
        orderList,
    },
    data() {
        return {
            url: Y_BASE_URL,
            isPhone: this.$store.state.isPhone,
            isStart: false,
            showOrderList: false,
            showList: false,
            showParam: false,
            disLayerCtrl: false,
            times: null,
            bound: null,
            orderNum: 0,
            latlngDis: {
                height: '',
                lon: '',
                lat: '',
                viewHeight: '',
            },
            themeParam: {
                pointRange: [],
                startDate: '',
                endDate: '',
                type: '',
            },
            number: 0,
            isShowSeqImg: false,
            seqImgCode: '',
            funGroupShow: false,
            mapSize: false,
            userName: '',
            aspectRatio: null,
            startDate: '',
            endDate: '',
            currentIndex: 0,
            checkedLAI: false,
            chartsShow: false,
            numCode: false,
        };
    },
    mounted: function() {
        this.$nextTick(() => {
            // 获取用户登录信息
            this.userName = localStorage.getItem('userInf')
                ? JSON.parse(localStorage.getItem('userInf')).name
                : '';
            initViewer('ViewerContainer');
            CommonJS.addPrimitive();
            this.isStart = true;
            this.disLatLng();
            // 获取参数,展示专题图
            if (this.$route.query && this.$route.query.nowChoice) {
                this.$refs.dataQueryTools.disCode = 'screen';
                this.themeParam.startDate = this.$route.query.startDate;
                this.themeParam.endDate = this.$route.query.endDate;
                this.themeParam.nowChoice = this.$route.query.nowChoice;
                this.themeParam.times = JSON.parse(this.$route.query.times);
                this.changePage();
            }
            if (this.userName) {
                this.getOrderNum();
            }
            this.traffic('系统访问');
        });
        // dataCenterBus.$on('numCode', val => {
        //     this.getOrderNum();
        // });
    },
    methods: {
        // 加载图层,绘制区域,生成专题图
        changePage() {
            this.funGroupShow = true;
            this.$nextTick(() => {
                this.$refs.funGroup[`${this.themeParam.nowChoice}Fun`]();
                if (
                    localStorage.getItem('drawPositions') &&
                    localStorage.getItem('drawPositions') !== 'undefined'
                ) {
                    this.getPoiData(localStorage.getItem('drawPositions'));
                } else if (
                    localStorage.getItem('shapData') &&
                    localStorage.getItem('shapData') !== 'undefined'
                ) {
                    this.getShapeData(localStorage.getItem('shapData'));
                }
                this.$store.commit('set_isShowScreenshots', true);
            });
        },
        // 解析json数组
        evil(fn) {
            let Fn = Function;
            return new Fn('return ' + fn)();
        },
        // 构建矩形与多边形区域
        getPoiData(data) {
            let data1 = JSON.parse(data);
            let data2 = this.evil(data1.pois);
            data2 = data2.map(item => {
                return new Cesium.Cartesian3(item.x, item.y, item.z);
            });
            let draw = new DrawFun();
            draw.createTarget(data2, data1.radius);
            // 获取矩形与多边形区域的范围
            this.themeParam.pointRange = draw.getRange(draw.getPoiArr(data2)).points;
            draw.changeMaterial(0);
        },
        // 构建shape文件上传的区域
        getShapeData(data) {
            let obj = JSON.parse(data);
            let draw = new DrawFun();
            draw.createAdministrativeDivisions({ jsonObject: obj }, false);
            // 获取shape文件的范围
            this.themeParam.pointRange = draw.getRange(draw.mergeArr(obj)).points;
        },
        fouseMap() {
            $('#ViewerContainer').focus();
        },
        // 左下方经纬度展示框
        disLatLng() {
            setTimeout(() => {
                this.latlngDis = Cesium.C_getPickPosition(viewer);
            }, 100);
        },
        ctrllistDis(isDis) {
            if (this.number === 0) {
                this.$refs.listParamDom.beginQuery();
                this.number++;
            }
            // 手机适配
            if (this.isPhone) {
                this.showList = false;
                if (isDis !== 'clear') {
                    this.showParam = true;
                } else {
                    this.showParam = false;
                    this.$refs.dataQueryTools.clearSelectedBtn('list_dis');
                }
            } else {
                this.showList = isDis === 'clear' ? false : !this.showList;
                this.showParam = isDis === 'clear' ? false : !this.showParam;
            }
        },
        // 控制订单列表界面展示
        ctrlOrderListDis(isDis) {
            this.showOrderList = isDis === 'clear' ? false : !this.showOrderList;
            if (this.showOrderList) {
                this.$refs.orderListDom.initData();
            }
        },
        ctrlLayerDis(isDis) {
            this.disLayerCtrl = isDis === 'ctrlLayerDis' ? false : !this.disLayerCtrl;
        },
        ctrlSeqImgsDis(isDis, code, serviceUrl) {
            this.seqImgCode = code ? code : null;
            this.serviceUrl = serviceUrl ? serviceUrl : '';
            this.isShowSeqImg = isDis === 'ctrlSeqImgsDis' ? false : !this.isShowSeqImg;
        },
        resetView() {
            flyToBoundingSphere([
                Cesium.Cartesian3.fromDegrees(78.9833, 23.85),
                Cesium.Cartesian3.fromDegrees(128.6666, 47.983),
            ]);
        },
        clearGroup() {
            this.funGroupShow = false;
            this.$refs.dataQueryTools.clearSelectedBtn('fun_group');
        },
        getTimes(times) {
            this.times = times;
        },

        // 用户退出登录
        async userLogout() {
            let resData = await logout();
            if (resData.status === 200) {
                this.$message.success('退出成功！');
                localStorage.setItem('userAuthorization', '');
                localStorage.setItem('userInf', '');
                this.userName = '';
                // if (!this.$route.query.token) {
                //     this.$router.replace({
                //         path: '/',
                //         query: {},
                //     });
                // }
                // setTimeout(() => {
                //     location.reload();
                // }, 500);
            }
        },
        openLoginPage(name) {
            this.$parent.loginShow = true;
            this.$parent.changeForm(name);
        },
        async getOrderNum() {
            let resT = await postQuery();
            if (resT.status === 200) {
                this.orderNum = resT.data;
            }
        },
        // 是否展示灰度值统计信息
        isDisGry() {
            let flag = false;
            if (this.$refs.funGroup && this.$refs.funGroup.nowChoice[0]) {
                flag = true;
            }
            return flag;
        },
        // 下载
        download() {
            window.location.href = `${this.url}public/down?url=commonProduct/data/高分共性产品与真实性检验共享服务平台用户手册.pdf`;
        },
        toDataManager() {
            let routeUrl = this.$router.resolve({ path: '/dataMagager' });
            window.open(routeUrl.href, '_blank');
        },
        async traffic(val) {
            let params = {
                name: val
            };
            await insertModular(params);
        }
    },
    watch: {
        userName(newVal, oldVal) {
            if (newVal) {
                this.getOrderNum();
            }
        },
        showParam(newVal, oldVal) {
            if (newVal) {
                this.traffic('产品列表模块');
            }
        },
        funGroupShow(newVal, oldVal) {
            if (newVal) {
                this.traffic('共性产品模块');
            }
        }
    },
    computed: {
        ...mapState({
            isShowScreenshots: function(state) {
                if (state.isShowScreenshots) {
                    this.mapSize = true;
                    // 经纬度范围框114.52494509723151 25.20015663526885 85.36972282682649 38.79503830099551
                    // let points = [
                    //     Cesium.Cartesian3.fromDegrees(40, 20, 0),
                    //     Cesium.Cartesian3.fromDegrees(80, 30, 0),
                    // ];
                    let points = this.themeParam.pointRange;
                    let pixelInf = coordinateTra(points);
                    this.aspectRatio =
                        (pixelInf[0].lng - pixelInf[1].lng) / (pixelInf[0].lat - pixelInf[1].lat);
                    flyToBoundingSphere(points, 8, () => {
                        // 如果为真，则允许用户旋转相机。如果为假，相机将锁定到当前标题。此标志仅适用于2D和3D。
                        viewer.scene.screenSpaceCameraController.enableRotate = false;
                        // 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
                        viewer.scene.screenSpaceCameraController.enableTranslate = false;
                        // 如果为真，允许用户放大和缩小。如果为假，相机将锁定到距离椭圆体的当前距离
                        viewer.scene.screenSpaceCameraController.enableZoom = false;
                        // 如果为真，则允许用户倾斜相机。如果为假，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
                        viewer.scene.screenSpaceCameraController.enableTilt = false;
                        this.$refs.screenshotsStaticFun.initLatLng();
                        this.$refs.screenshotsStaticFun.initTime();
                    });
                    // 去掉二三维切换动画效果,使二三维切换的时候视野范围不丢失
                    viewer.scene.morphTo2D(0.0);
                } else {
                    this.$refs.screenshotsStaticFun && this.$refs.screenshotsStaticFun.hideModel();
                    this.mapSize = false;
                    viewer.scene.morphTo3D(0.0);
                    // 如果为真，则允许用户旋转相机。如果为假，相机将锁定到当前标题。此标志仅适用于2D和3D。
                    viewer.scene.screenSpaceCameraController.enableRotate = true;
                    // 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
                    viewer.scene.screenSpaceCameraController.enableTranslate = true;
                    // 如果为真，允许用户放大和缩小。如果为假，相机将锁定到距离椭圆体的当前距离
                    viewer.scene.screenSpaceCameraController.enableZoom = true;
                    // 如果为真，则允许用户倾斜相机。如果为假，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
                    viewer.scene.screenSpaceCameraController.enableTilt = true;
                }
                return state.isShowScreenshots;
            },
            orderNumCode: function(state) {
                if (state.orderNumCode !== this.numCode) {
                    this.getOrderNum();
                    this.numCode = state.orderNumCode;
                }
            },
        }),
    },
};
</script>

<style lang="scss" scoped>
#ViewerContainer {
    overflow: hidden;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1;
    position: absolute;
    pointer-events: all;
    &.mapThematicSize {
        // clip-path: inset(210px 650px 210px 650px round 4px);
        clip-path: inset(
            calc(100% / 2 - var(--thematicHeight) / 2 + var(--thematicImgHDis))
                calc(100% / 2 - var(--thematicWidth) / 2 + var(--thematicImgWDis))
                calc(100% / 2 - var(--thematicHeight) / 2 + var(--thematicImgHDis))
                calc(100% / 2 - var(--thematicWidth) / 2 + var(--thematicImgWDis)) round 4px
        );
    }
    .header {
        width: 100%;
        height: 300px;
        background-image: url('./theme/img/title_bac.png');
        background-size: 100% 100%;
        position: absolute;
        pointer-events: none;
        z-index: 20;
        // display: flex;
        top: 0px;
        // justify-content: center;
        pointer-events: none;
        .title_name {
            width: 707px;
            margin: auto;
            font-size: 39px;
            font-weight: 600;
            position: relative;
            top: 10px;
            background: linear-gradient(to right, #c3f5fe, #cde1fd, #d2ccf9);
            -webkit-background-clip: text;
            color: transparent;
        }
        .header-user {
            position: absolute;
            display: flex;
            align-items: center;
            right: 10px;
            top: 0px;
            // width: 200px;
            height: 50px;
            color: #fff;
            font-size: 20px;
            pointer-events: all;
            .user-wrap {
                display: flex;
                align-items: center;
                margin-left: 10px;
                .user-portrait {
                    margin-right: 5px;
                    width: 30px;
                    height: 30px;
                    background: url('./theme/img/user.png') no-repeat;
                    background-size: contain;
                }
                .user-help {
                    margin-right: 5px;
                    width: 30px;
                    height: 30px;
                    background: url('./theme/img/help.png') no-repeat;
                    background-size: contain;
                }
            }
            .user-quit {
                cursor: pointer;
                white-space: nowrap;
                height: 25px;
                width: auto;
                margin-left: 10px;
            }
            .user-data {
                .num_box {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: red;
                    line-height: 19px;
                }
            }
        }
    }
    .lat_lng_dis_box {
        position: absolute;
        bottom: 0px;
        z-index: 1;
        width: 100%;
        height: 20px;
        background: #0a112b;
        color: #ffffff;
        line-height: 20px;
        .text_box {
            width: 30%;
            display: flex;
            justify-content: space-around;
        }
    }
}
</style>
